<template>
    <VZPanel title="客诉质量信息"  iconText="mdi-finance" height="fit" rounded="md" primaryColor="#0f3a5f" style="background-color:#0f3a5f;">
        <v-row align="center" >
            <v-col cols="2">
                <v-combobox  v-model="companyCode" :items="companyItems" label="公司" dark ></v-combobox>
            </v-col>
            <v-col cols="2">
                <v-select :items="years" label="年份" v-model="year" dark></v-select>
            </v-col>
            <v-col cols="3">
                <!--<v-btn class="ma-1" outlined color="#8D9957" @click="search"><v-icon>mdi-magnify</v-icon>查询</v-btn>-->
                <v-btn class="ma-1" outlined color="#8D9957" @click="reset"><v-icon >mdi-refresh</v-icon>重置</v-btn>
            </v-col>
        </v-row>
        <v-row>
            <v-col cols="7">
                <svg  viewBox="60 35 400 400" width="100%" height="65vh" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <g id="triangle">
                            <polygon points="30,0 60,50 0,50" style="stroke:#0b3048; stroke-width:1;"/>
                        </g>
                        <g id="triangle1">
                            <polygon points="30,0 60,50 90,0" style="stroke:#0b3048; stroke-width:1;"/>
                        </g>

                        <g id="trangle">
                            <polygon points="30,0 0,50 180,50 150,0" fill="#0d293c" style="stroke:#0b3048; stroke-width:1;"/>
                        </g>

                        <g id="rectangle">
                            <rect x="10" y="40" rx="1" ry="1" width="60" height="35" stroke="#0b3048" stroke-width="1" />
                        </g>


                        <g id="circle">
                            <circle cx="16" cy="16" r="8" />
                        </g>
                    </defs>


                    <g transform="translate(0 50)">
                        <use id="month-use-01" name="month" :fill="monthColor1" xlink:href="#rectangle"/>
                        <text id="month-text-01" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">1月</text>
                    </g>
                    <g transform="translate(0 86)">
                        <use id="month-use-02" name="month" :fill="monthColor2" xlink:href="#rectangle" />
                        <text id="month-text-02" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">2月</text>
                    </g>
                    <g transform="translate(0 121)">
                        <use id="month-use-03" name="month" :fill="monthColor3" xlink:href="#rectangle" />
                        <text id="month-text-03" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">3月</text>
                    </g>
                    <g transform="translate(0 156)">
                        <use id="month-use-04" name="month" :fill="monthColor4" xlink:href="#rectangle" />
                        <text id="month-text-04" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">4月</text>
                    </g>
                    <g transform="translate(0 191)">
                        <use id="month-use-05" name="month" :fill="monthColor5" xlink:href="#rectangle" />
                        <text id="month-text-05" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">5月</text>
                    </g>
                    <g transform="translate(0 226)">
                        <use id="month-use-06" name="month" :fill="monthColor6" xlink:href="#rectangle" />
                        <text id="month-text-06" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">6月</text>
                    </g>


                    <g transform="translate(440 50)">
                        <use id="month-use-07" name="month" :fill="monthColor7" xlink:href="#rectangle" />
                        <text id="month-text-07" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">7月</text>
                    </g>
                    <g transform="translate(440 86)">
                        <use id="month-use-08" name="month" :fill="monthColor8" xlink:href="#rectangle" />
                        <text id="month-text-08" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">8月</text>
                    </g>
                    <g transform="translate(440 121)">
                        <use id="month-use-09" name="month" :fill="monthColor9" xlink:href="#rectangle" />
                        <text id="month-text-09" name="month" fill="#fffff3" font-size="16" dx="30" dy="62" font-family="黑体" textLength="22">9月</text>
                    </g>
                    <g transform="translate(440 156)">
                        <use id="month-use-10" name="month" :fill="monthColor10" xlink:href="#rectangle" />
                        <text id="month-text-10" name="month" fill="#fffff3" font-size="16" dx="28" dy="62" font-family="黑体" textLength="26">10月</text>
                    </g>
                    <g transform="translate(440 191)">
                        <use id="month-use-11" name="month" :fill="monthColor11" xlink:href="#rectangle" />
                        <text id="month-text-11" name="month" fill="#fffff3" font-size="16" dx="28" dy="62" font-family="黑体" textLength="26">11月</text>
                    </g>
                    <g transform="translate(440 226)">
                        <use id="month-use-12" name="month" :fill="monthColor12" xlink:href="#rectangle" />
                        <text id="month-text-12" name="month" fill="#fffff3" font-size="16" dx="28" dy="62" font-family="黑体" textLength="26">12月</text>
                    </g>

                    <g transform="translate(230 30)">
                        <use id="day-use-31" name="day" :fill="dayColor31" xlink:href="#triangle" />
                        <text id="day-text-31" name="day" fill="#fffff3" font-size="18" dx="24" dy="35" font-family="黑体" textLength="16">31</text>
                    </g>


                    <g transform="translate(200 80)">
                        <use id="day-use-28" name="day" :fill="dayColor28" xlink:href="#triangle" />
                        <text id="day-text-28" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">28</text>
                    </g>
                    <g transform="translate(200 80)">
                        <use id="day-use-29" name="day" :fill="dayColor29" xlink:href="#triangle1" />
                        <text id="day-text-29" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">29</text>
                    </g>
                    <g transform="translate(260 80)">
                        <use id="day-use-30" name="day" :fill="dayColor30" xlink:href="#triangle" />
                        <text id="day-text-30" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="16">30</text>
                    </g>



                    <g transform="translate(170 130)">
                        <use xlink:href="#trangle" />
                        <text fill="#fffff3" font-size="26" dx="30" dy="35" font-family="黑体" textLength="120">{{current_year_month}}</text>
                    </g>



                    <g transform="translate(140 180)">
                        <use id="day-use-21" name="day" :fill="dayColor21" xlink:href="#triangle" />
                        <text id="day-text-21" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">21</text>
                    </g>
                    <g transform="translate(140 180)">
                        <use id="day-use-22" name="day" :fill="dayColor22" xlink:href="#triangle1" />
                        <text id="day-text-22" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">22</text>
                    </g>
                    <g transform="translate(200 180)">
                        <use id="day-use-23" name="day" :fill="dayColor23" xlink:href="#triangle" />
                        <text id="day-text-23" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">23</text>
                    </g>
                    <g transform="translate(200 180)">
                        <use id="day-use-24" name="day" :fill="dayColor24" xlink:href="#triangle1" />
                        <text id="day-text-24" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">24</text>
                    </g>
                    <g transform="translate(260 180)">
                        <use id="day-use-25" name="day" :fill="dayColor25" xlink:href="#triangle" />
                        <text id="day-text-25" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">25</text>
                    </g>
                    <g transform="translate(260 180)">
                        <use id="day-use-26" name="day" :fill="dayColor26" xlink:href="#triangle1" />
                        <text id="day-text-26" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">26</text>
                    </g>
                    <g transform="translate(320 180)">
                        <use id="day-use-27" name="day" :fill="dayColor27" xlink:href="#triangle" />
                        <text id="day-text-27" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">27</text>
                    </g>





                    <g transform="translate(110 230)">
                        <use id="day-use-12" name="day" :fill="dayColor12" xlink:href="#triangle" />
                        <text id="day-text-12" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">12</text>
                    </g>
                    <g transform="translate(110 230)">
                        <use id="day-use-13" name="day" :fill="dayColor13" xlink:href="#triangle1" />
                        <text id="day-text-13" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">13</text>
                    </g>
                    <g transform="translate(170 230)">
                        <use id="day-use-14" name="day" :fill="dayColor14" xlink:href="#triangle" />
                        <text id="day-text-14" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">14</text>
                    </g>
                    <g transform="translate(170 230)">
                        <use id="day-use-15" name="day" :fill="dayColor15" xlink:href="#triangle1" />
                        <text id="day-text-15" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">15</text>
                    </g>
                    <g transform="translate(230 230)">
                        <use id="day-use-16" name="day" :fill="dayColor16" xlink:href="#triangle" />
                        <text id="day-text-16" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">16</text>
                    </g>
                    <g transform="translate(230 230)">
                        <use id="day-use-17" name="day" :fill="dayColor17" xlink:href="#triangle1" />
                        <text id="day-text-17" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">17</text>
                    </g>
                    <g transform="translate(290 230)">
                        <use id="day-use-18" name="day" :fill="dayColor18" xlink:href="#triangle" />
                        <text id="day-text-18" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">18</text>
                    </g>
                    <g transform="translate(290 230)">
                        <use id="day-use-19" name="day" :fill="dayColor19" xlink:href="#triangle1" />
                        <text id="day-text-19" name="day" fill="#fffff3" font-size="18" dx="53" dy="28" font-family="黑体" textLength="16">19</text>
                    </g>
                    <g transform="translate(350 230)">
                        <use id="day-use-20" name="day" :fill="dayColor20" xlink:href="#triangle" />
                        <text id="day-text-20" name="day" fill="#fffff3" font-size="18" dx="23" dy="35" font-family="黑体" textLength="16">20</text>
                    </g>


                    <g transform="translate(80 280)">
                        <use id="day-use-01" name="day" :fill="dayColor1" xlink:href="#triangle" />
                        <text id="day-text-01" name="day" fill="#fffff3" font-size="18" dx="24" dy="35" font-family="黑体" textLength="10">1</text>
                    </g>
                    <g transform="translate(80 280)">
                        <use id="day-use-02" name="day" :fill="dayColor2" xlink:href="#triangle1" />
                        <text id="day-text-02" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">2</text>
                    </g>
                    <g transform="translate(140 280)">
                        <use id="day-use-03" name="day" :fill="dayColor3" xlink:href="#triangle" />
                        <text id="day-text-03" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">3</text>
                    </g>
                    <g transform="translate(140 280)">
                        <use id="day-use-04" name="day" :fill="dayColor4" xlink:href="#triangle1" />
                        <text id="day-text-04" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">4</text>
                    </g>
                    <g transform="translate(200 280)">
                        <use id="day-use-05" name="day" :fill="dayColor5" xlink:href="#triangle" />
                        <text id="day-text-05" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">5</text>
                    </g>
                    <g transform="translate(200 280)">
                        <use id="day-use-06" name="day" :fill="dayColor6" xlink:href="#triangle1" />
                        <text id="day-text-06" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">6</text>
                    </g>
                    <g transform="translate(260 280)">
                        <use id="day-use-07" name="day" :fill="dayColor7" xlink:href="#triangle" />
                        <text id="day-text-07" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">7</text>
                    </g>
                    <g transform="translate(260 280)">
                        <use id="day-use-08" name="day" :fill="dayColor8" xlink:href="#triangle1" />
                        <text id="day-text-08" name="day" fill="#fffff3" font-size="18" dx="55" dy="28" font-family="黑体" textLength="10">8</text>
                    </g>
                    <g transform="translate(320 280)">
                        <use id="day-use-09" name="day" :fill="dayColor9" xlink:href="#triangle" />
                        <text id="day-text-09" name="day" fill="#fffff3" font-size="18" dx="26" dy="35" font-family="黑体" textLength="10">9</text>
                    </g>
                    <g transform="translate(320 280)">
                        <use id="day-use-10" name="day" :fill="dayColor10" xlink:href="#triangle1" />
                        <text id="day-text-10" name="day" fill="#fffff3" font-size="18" dx="52" dy="28" font-family="黑体" textLength="16">10</text>
                    </g>
                    <g transform="translate(380 280)">
                        <use id="day-use-11" name="day" :fill="dayColor11" xlink:href="#triangle" />
                        <text id="day-text-11" name="day" fill="#fffff3" font-size="18" dx="24" dy="35" font-family="黑体" textLength="16">11</text>
                    </g>

                    <g transform="translate(70 335)">
                        <use fill="#ff0000" xlink:href="#circle" />
                        <text fill="#ff0000" font-size="14" dx="30" dy="22" font-family="黑体" textLength="160">客户受控发运问题</text>
                    </g>
                    <g transform="translate(273 335)">
                        <use  fill="#ff8302" xlink:href="#circle" />
                        <text fill="#ff8302" font-size="14" dx="30" dy="22" font-family="黑体" textLength="145">客户书面抱怨问题</text>
                    </g>
                    <!-- <g transform="translate(70 360)">
                      <use fill="#e8e65b" xlink:href="#circle" />
                      <text fill="#e8e65b" font-size="14" dx="30" dy="22" font-family="黑体" textLength="175">客户一般(口头)抱怨问题</text>
                    </g> -->
                    <g transform="translate(70 360)">
                        <use  fill="#3eff6f" xlink:href="#circle" />
                        <text fill="#3eff6f" font-size="14" dx="30" dy="22" font-family="黑体" textLength="73">无客诉问题</text>
                    </g>

                </svg>
            </v-col>

            <v-col cols="5">
                <v-row style="padding-top:1vh" align-content="center" justify="center">
                    <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('ABC')">
                        <v-col class="text-subtitle-1 text-center"  cols="11">
                            <span style="font-weight:bold;font-size:20px"><v-icon>mdi-set-all</v-icon>  当月客诉问题总数:{{count_num}}</span>
                        </v-col>
                        <v-col cols="11" style="padding:0">
                            <v-progress-linear rounded striped :value="count_rate" color="#8D9957" height="8vh" >
                                <template v-slot:default="{ value }">
                                    <strong>{{ value }}%</strong>
                                </template>
                            </v-progress-linear>
                        </v-col>
                    </v-card>
                    <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('A')">
                        <v-col class="text-subtitle-1 text-center"  cols="11">
                            <span style="font-weight:bold;font-size:20px">客户受控发运问题:{{a_num}}</span>
                        </v-col>
                        <v-col cols="11" style="padding:0">
                            <v-progress-linear rounded striped :value="a_rate" color="#ff0000" height="8vh" >
                                <template v-slot:default="{ value }">
                                    <strong>{{ value }}%</strong>
                                </template>
                            </v-progress-linear>
                        </v-col>
                    </v-card>
                    <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('B')">
                        <v-col class="text-subtitle-1 text-center"  cols="11">
                            <span style="font-weight:bold;font-size:20px">客户书面抱怨问题:{{b_num}}</span>
                        </v-col>
                        <v-col cols="11" style="padding:0">
                            <v-progress-linear rounded :value="b_rate" color="#ff8302" height="8vh" >
                                <template v-slot:default="{ value }">
                                    <strong>{{ value }}%</strong>
                                </template>
                            </v-progress-linear>
                        </v-col>
                    </v-card>
                    <!-- style="background:#ff8302!important;" -->
                    <!-- <v-card width="100vw" color="#0f3a5f" dark @click="toMonthPage('CC')">
                      <v-col class="text-subtitle-1 text-center"  cols="11">
                        <span style="font-weight:bold;font-size:20px">客户一般(口头)抱怨问题:{{cc_num}}</span>
                      </v-col>
                      <v-col cols="11" style="padding:0">
                        <v-progress-linear rounded :value="cc_rate"  color="#e8e65b" height="8vh" style="background:#e8e65b!important;">
                          <template v-slot:default="{ value }">
                            <strong>{{ value }}%</strong>
                          </template>
                        </v-progress-linear>
                      </v-col>
                    </v-card> -->
                </v-row>
            </v-col>
        </v-row>

    </VZPanel>
</template>
<script>
    export default {
        data () {
            return {
                companyItems:[],
                companyCode:'',
                years:[],
                year:new Date().getFullYear(),
                /*      current_year_month:this.year+'年'+this.month+'月',*/
                month:new Date().getMonth() + 1,
                day:'',
                count_rate:'60',
                count_num:120,
                a_rate:70,
                a_num:60,
                b_rate:85.23,
                b_num:43,
                c_rate:67.56,
                cc_rate:67.56,
                c_num:150,
                cc_num:150,
                monthColor1:'#0d293c00',
                monthColor2:'#0d293c00',
                monthColor3:'#0d293c00',
                monthColor4:'#0d293c00',
                monthColor5:'#0d293c00',
                monthColor6:'#0d293c00',
                monthColor7:'#0d293c00',
                monthColor8:'#0d293c00',
                monthColor9:'#0d293c00',
                monthColor10:'#0d293c00',
                monthColor11:'#0d293c00',
                monthColor12:'#0d293c00',

                dayColor1:'#0d293c00',
                dayColor2:'#0d293c00',
                dayColor3:'#0d293c00',
                dayColor4:'#0d293c00',
                dayColor5:'#0d293c00',
                dayColor6:'#0d293c00',
                dayColor7:'#0d293c00',
                dayColor8:'#0d293c00',
                dayColor9:'#0d293c00',
                dayColor10:'#0d293c00',
                dayColor11:'#0d293c00',
                dayColor12:'#0d293c00',
                dayColor13:'#0d293c00',
                dayColor14:'#0d293c00',
                dayColor15:'#0d293c00',
                dayColor16:'#0d293c00',
                dayColor17:'#0d293c00',
                dayColor18:'#0d293c00',
                dayColor19:'#0d293c00',
                dayColor20:'#0d293c00',
                dayColor21:'#0d293c00',
                dayColor22:'#0d293c00',
                dayColor23:'#0d293c00',
                dayColor24:'#0d293c00',
                dayColor25:'#0d293c00',
                dayColor26:'#0d293c00',
                dayColor27:'#0d293c00',
                dayColor28:'#0d293c00',
                dayColor29:'#0d293c00',
                dayColor30:'#0d293c00',
                dayColor31:'#0d293c00',

                clickReset:false,
            }
        },
        methods: {
            search(){
                this.loadMonthColorData();
                this.loadDayColorData();
                this.loadRateData();
                this.clickReset = false;
            },
            reset(){
                this.clickReset = true;
                this.companyCode='',
                    this.year = new Date().getFullYear();
                this.month = new Date().getMonth() + 1;
                this.search();
            },
            getMonthInYear() {
                if(this.year < new Date().getFullYear()){
                    return 12;
                }else{
                    return new Date().getMonth() + 1
                }
            },
            getDayInMonth() {
                if(this.year < new Date().getFullYear()){
                    return new Date(this.year, this.month, 0).getDate();
                }else{
                    if(this.month < new Date().getMonth() + 1){
                        return new Date(this.year, this.month, 0).getDate();
                    }else{
                        return new Date().getDate();
                    }
                }
            },
            clickMonth(month){
                let m = month.split('-')[2];
                if(m <= this.getMonthInYear()){
                    this.month = parseInt(m);
                    this.loadDayColorData();
                    this.loadRateData();
                }
            },
            clickDay(day){
                let d = day.split('-')[2];
                if(d <= this.getDayInMonth()){
                    this.day = d;
                    console.log(this);
                    this.$emit('toPage','v82d136d35048a4a1b63c8259c4', {problem_happen_date:this.year_month_day,"severity":"ABC"});
                }
            },
            toMonthPage(severity){
                this.$emit('toPage','v82d136d35048a4a1b63c8259c4', {"happen_month":"'"+this.year_month+"'","severity":severity});
            },
            loadCompanyData() {
                let _this = this
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_COMPANY_SELECT",
                    params: {},
                    callBack(res) {
                        if(res.success){
                            let dataList = res.rows;
                            let companyList = [];
                            dataList.forEach((item) => {
                                let map = {};
                                map.text = item.company_name;
                                map.value = item.company_code;
                                companyList.push(map);
                            })
                            _this.companyItems = companyList;
                        }
                    },
                })
            },
            refreshMonthData(){
                this.monthColor1 = '#0d293c00';
                this.monthColor2 = '#0d293c00';
                this.monthColor3 = '#0d293c00';
                this.monthColor4 = '#0d293c00';
                this.monthColor5 = '#0d293c00';
                this.monthColor6 = '#0d293c00';
                this.monthColor7 = '#0d293c00';
                this.monthColor8 = '#0d293c00';
                this.monthColor9 = '#0d293c00';
                this.monthColor10 = '#0d293c00';
                this.monthColor11 = '#0d293c00';
                this.monthColor12 = '#0d293c00';
            },
            refreshDayData(){
                this.dayColor1 = '#0d293c00';
                this.dayColor2 = '#0d293c00';
                this.dayColor3 = '#0d293c00';
                this.dayColor4 = '#0d293c00';
                this.dayColor5 = '#0d293c00';
                this.dayColor6 = '#0d293c00';
                this.dayColor7 = '#0d293c00';
                this.dayColor8 = '#0d293c00';
                this.dayColor9 = '#0d293c00';
                this.dayColor10 = '#0d293c00';
                this.dayColor11 = '#0d293c00';
                this.dayColor12 = '#0d293c00';

                this.dayColor13 = '#0d293c00';
                this.dayColor14 = '#0d293c00';
                this.dayColor15 = '#0d293c00';
                this.dayColor16 = '#0d293c00';
                this.dayColor17 = '#0d293c00';
                this.dayColor18 = '#0d293c00';
                this.dayColor19 = '#0d293c00';
                this.dayColor20 = '#0d293c00';
                this.dayColor21 = '#0d293c00';
                this.dayColor22 = '#0d293c00';
                this.dayColor23 = '#0d293c00';
                this.dayColor24 = '#0d293c00';

                this.dayColor25 = '#0d293c00';
                this.dayColor26 = '#0d293c00';
                this.dayColor27 = '#0d293c00';
                this.dayColor28 = '#0d293c00';
                this.dayColor29 = '#0d293c00';
                this.dayColor30 = '#0d293c00';
                this.dayColor31 = '#0d293c00';
            },
            loadMonthColorData(){
                let _this = this;
                this.refreshMonthData();
                let months = this.getMonthInYear();
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_PROBLEM_TRIANGLE_MONTH_DATA",
                    params: {"queryCondition[year]":_this.year,"queryCondition[company_code]":_this.companyCode.value},
                    callBack(res) {
                        if(res.success && res.rows.length > 0) {
                            let dataList = res.rows;
                            for (let i = 1; i <= months; i++) {
                                let severity = dataList[i - 1].severity;
                                let type = dataList[i - 1].type;
                                if (severity == "A") {
                                    if (type == 'CS1' || type == 'CS2') {
                                        _this["monthColor" + i] = '#ff0000';
                                    } else if (type == 'QR') {
                                        _this["monthColor" + i] = '#ff8302';
                                    }
                                        // else if (type == 'CC'){
                                        //   _this["monthColor" + i] = '#e8e65b';
                                    // }
                                    else {
                                        _this["monthColor" + i] = '#218508';
                                    }
                                } else {
                                    _this["monthColor" + i] = '#218508';
                                }
                            }
                        }
                    },
                })
            },
            loadDayColorData(){
                let _this = this;
                this.refreshDayData();
                let days = this.getDayInMonth();
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_PROBLEM_TRIANGLE_DAY_DATA",
                    params: {"queryCondition[year_month]":_this.year_month,"queryCondition[company_code]":_this.companyCode.value},
                    callBack(res) {
                        if(res.success && res.rows.length > 0){
                            let dataList = res.rows;
                            for(let i = 1;i <= days;i++){
                                let severity = dataList[i-1].severity;
                                let type = dataList[i - 1].type;
                                if (severity == "A") {
                                    if (type == 'CS1' || type == 'CS2') {
                                        _this["dayColor" + i] = '#ff0000';
                                    } else if (type == 'QR') {
                                        _this["dayColor" + i] = '#ff8302';
                                    } else if (type == 'CC'){
                                        _this["dayColor" + i] = '#e8e65b';
                                    } else {
                                        _this["dayColor" + i] = '#218508';
                                    }
                                } else {
                                    _this["dayColor" + i] = '#218508';
                                }
                            }
                        }
                    },
                })
            },
            loadRateData(){
                let _this = this;
                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_PROBLEM_TRIANGLE_CLOSE_RATE_CHANGE",
                    params: {"queryCondition[year_month]":_this.year_month,"queryCondition[company_code]":_this.companyCode.value},
                    callBack(res) {
                        if(res.success && res.rows.length > 0){
                            let data = res.rows[0];
                            _this.a_num = data.a_num;
                            _this.b_num = data.b_num;
                            _this.c_num = data.c_num;
                            _this.cc_num = data.cc_num;
                            console.log("cc_num:"+data.cc_num);
                            console.log("cc_close_num:"+data.cc_close_num);

                            console.log("a_num:"+data.a_num);
                            console.log("a_close_num:"+data.a_close_num);

                            //   _this.count_num = data.a_num + data.b_num + data.c_num;
                            _this.count_num = data.a_num + data.b_num + data.cc_num;

                            //   let count_close_num = data.a_close_num + data.b_close_num + data.c_close_num;
                            let count_close_num = data.a_close_num + data.b_close_num + data.cc_close_num;

                            if(data.a_num == 0){
                                _this.a_rate = 0;
                            }else{
                                _this.a_rate = parseFloat((data.a_close_num * 100)/data.a_num).toFixed(2);
                            }
                            if(data.b_num == 0){
                                _this.b_rate = 0;
                            }else{
                                _this.b_rate = parseFloat((data.b_close_num * 100)/data.b_num).toFixed(2);
                            }if(data.cc_num == 0){
                                _this.cc_rate = 0;
                            }
                            if(data.c_num == 0){
                                _this.c_rate = 0;
                            }if(data.cc_close_num == 0){
                                _this.cc_rate = 0;
                            }
                            else{
                                _this.c_rate = parseFloat((data.c_close_num * 100)/data.c_num).toFixed(2);
                                _this.cc_rate = parseFloat((data.cc_close_num * 100)/data.cc_num).toFixed(2);
                            }
                            if(_this.count_num == 0){
                                _this.count_rate = 0;
                            }else{
                                _this.count_rate = parseFloat((count_close_num * 100)/_this.count_num).toFixed(2);
                            }
                            console.log("cc_rate:"+_this.cc_rate);
                        }
                    },
                })
            },
        },
        created(){
            const year = new Date().getFullYear()
            const endYear = year ;
            const diff = year - 2024;
            for (let i = year - 4 - diff; i <= endYear; i++) {
                this.years.push(i)
            }
        },
        computed:{
            current_year_month:function(){
                return this.year+'年'+this.month+'月';
            },
            year_month:function(){
                return this.year+'-'+String(this.month).padStart(2, '0');
            },
            year_month_day:function(){
                return this.year+'-'+String(this.month).padStart(2, '0') + '-' +this.day;
            },
            current_days:function(){
                return new Date(this.year, this.month, 0).getDate();
            },
        },
        mounted () {
            let _this = this;
            this.loadCompanyData();
            var monthElement = document.querySelectorAll('[name="month"]');
            monthElement.forEach(function(element) {
                element.addEventListener('click', function(event) {
                    _this.clickMonth(event.target.id);
                });
            });

            var dayElement = document.querySelectorAll('[name="day"]');
            dayElement.forEach(function(element) {
                element.addEventListener('click', function(event) {
                    _this.clickDay(event.target.id);
                });
            });
            this.loadMonthColorData();
            this.loadDayColorData();
            this.loadRateData();
        },
        watch:{
            companyCode(newValue,oldValue){
                if(newValue != undefined && newValue != ''){
                    this.search();
                }
            },
            year(newValue){
                if(!this.clickReset){
                    this.search();
                }
            }
        },
        props: {
            prop:{type:String,desc:'基本参数'}
        }
    }
</script>
